<style scoped>
.car-offer{
    padding: 15px;
}
.offer-title{
    padding-left: 15px;
    padding-right: 15px;
    height: 35px;
    line-height: 35px;
    background-color: #edf2f6;
}
.car-info{
    padding: 15px;
}
.next-btn{
    text-align: right;
}
.title-right{
    float: right;
}
.brand-left{
    width: 77%;
    margin-right: 3%;

}
.brand-right{
    width:20%;
    padding:0;
    border-radius: 0 2px 2px 0;
}
.scroll-box{
    border: 1px solid #dddee1;
    padding: 16px; 
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 5px;
}
</style>

<style>
.title-right{
    float: right;
}
.common-car-title{
    border-bottom:1px solid #f2f2f2;
    overflow: hidden;
    padding:10px 0;
}
.common-car-title h3{
    position: relative;
    display: inline-block;
    font-size:16px;
    padding-left:15px;
}
.common-car-title h3:before{
    content:'';
    position: absolute;
    left: 0;
    top:0;
    bottom:0;
    width:3px;
    background-color:#3db1fa;
}
.common-title-r{
    width : 250px;
    float: right;
}
.brand-input{
    margin-bottom:20px;
}
.brand-table{
    margin-bottom:20px;
}
</style>

<template>
    <div>
        <product-title></product-title>
        <div class="car-offer">
            <div class="common-car-title">
                <h3>车辆信息</h3>
                <div class="common-title-r">
                    <Steps :current="1" size="small">
                        <Step title=""></Step>
                        <Step title=""></Step>
                        <Step title=""></Step>
                        <Step title=""></Step>
                        <Step title=""></Step>
                    </Steps>
                </div>
            </div>
            <div class="offer-title">
                详细车辆信息
            </div>
            <div class="car-info common-box-body">
                <Form :model="carInfo" ref="carInfo" :rules="ruleValidate">
                    <Row>
                        <Col span="12">
                            <FormItem label="车架号" prop="frameNo">
                                <Input v-model="carInfo.frameNo" @on-change="frameNoChange" placeholder=""></Input>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="发动机号" prop="engineNo">
                                <Input v-model="carInfo.engineNo" @on-change="engineNoChange" placeholder=""></Input>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="品牌型号" prop="brandCode">
                                <Select class="brand-left"  size="large" v-model="carInfo.brandCode" label-in-value @on-change="brandCodeChange"  placeholder="请选择">
                                    <Option :value="item.brandCode" v-for="item in carType" :key="item.brandCode" :label="item.standardName+item.engineDesc+item.parentVehName">
                                        <span>{{item.standardName}}{{item.engineDesc}}{{item.parentVehName}}{{item.familyName}}{{item.seat}}座</span>
                                        <span style="display:block;color:#999">新车购置价：{{item.newCarPrice}}</span>
                                    </Option>                            
                                </Select><Button class="brand-right" @click="openBrandModal"  type="primary">选择</Button>  
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="登记日期" prop="firstRegister">
                                <DatePicker type="date" v-model="carInfo.firstRegister" @on-change="dateChange($event,carInfo,'firstRegisterDate')" placeholder="请选择登记日期"></DatePicker>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="是否一年内过户" prop="isTrans">
                                <Select  size="large" v-model="carInfo.isTrans"   placeholder="请选择">
                                    <Option value="1">是</Option>
                                    <Option value="0">否</Option>                              
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="12" v-if="isTrans">
                            <FormItem label="过户日期" prop="trans">
                                <DatePicker type="date"  v-model="carInfo.trans" @on-change="dateChange($event,carInfo,'transDate')" placeholder="请选择过户日期"></DatePicker>
                            </FormItem>
                        </Col>
                    </Row>
                </Form> 
                <Form :model="carInfo" ref="owner" :rules="ruleValidate">
                    <Row> 
                        <Col span="8">
                            <FormItem label="车主姓名" prop="ownerName">
                                <Input v-model="carInfo.ownerName" placeholder=""></Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="车主身份证" prop="ownerID">
                                <Input v-model="carInfo.ownerID" placeholder=""></Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="车主手机号" prop="ownerMobile">
                                <Input v-model="carInfo.ownerMobile" placeholder=""></Input>
                            </FormItem>
                        </Col>
                    </Row>    
                    <!-- <Row>
                        <Col span="12" offset="6">
                            <Button type="primary" long size="large" @click="caridSend()">下一步</Button>
                        </Col>
                    </Row>                     -->
                </Form> 
            </div>
            <div class="offer-title" >
                投保人信息
                <div class="title-right">
                    <Checkbox @on-change="applicantChange">同车主</Checkbox>
                </div>
            </div> 
            <div class="car-info common-box-body">
                <Form :model="applicant" ref="applicant" :rules="ruleValidate">
                    <Row>
                        <Col span="8">
                            <FormItem label="姓名" prop="applicantName">
                                <Input v-model="applicant.applicantName" placeholder=""></Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="身份证" prop="applicantID">
                                <Input v-model="applicant.applicantID" placeholder=""></Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="手机号" prop="applicantMobile">
                                <Input v-model="applicant.applicantMobile" placeholder=""></Input>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </div>
            <div class="offer-title">
                被保人信息
                <div class="title-right">
                    <Checkbox @on-change="insuredChange">同车主</Checkbox>
                </div>
            </div> 
            <div class="car-info common-box-body">
                <Form :model="insured" ref="insured" :rules="ruleValidate">
                    <Row>
                        <Col span="8">
                            <FormItem label="姓名" prop="insuredName">
                                <Input v-model="insured.insuredName" placeholder=""></Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="身份证" prop="insuredID">
                                <Input v-model="insured.insuredID" placeholder=""></Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="手机号" prop="insuredMobile">
                                <Input v-model="insured.insuredMobile" placeholder=""></Input>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </div>
            <Row class="next-btn">
                <Col span="3" offset="15">
                    <Button long type="primary" size="large" shape="circle" @click="next">下一步</Button>                    
                </Col>
                <Col span="3" offset="1">
                    <Button long type="ghost" size="large" shape="circle" @click="goBack">返回上一步</Button>
                </Col>
            </Row>              
        </div>
        <Spin size="large" fix v-if="spinShow"></Spin>
        <Modal v-model="brandModal" title="选择车型" width="800">
            <div class="common-box-body">
                <div class="import-search">
                    <Input v-model="brandInput"  placeholder="请输入车型关键字" class="brand-input">
                        <Button slot="append" @click="brandSearch" icon="ios-search"></Button>
                    </Input>
                </div>
            </div>
            <!-- <Table :columns="brandHead" :data="brandList" class="brand-table" :show-header='false'></Table> -->
            <Scroll :on-reach-bottom="handleReachBottom" :distance-to-edge="-50">
                <div class="scroll-box" v-for="(item, index) in brandList" :key="index" @click="chooseBrand(index)">
                   <span>{{item.standardName}}{{item.engineDesc}}{{item.parentVehName}}{{item.familyName}}{{item.seat}}座</span>
                   <span style="float:right;color:#999">新车购置价：{{item.newCarPrice}}</span>
                </div>
            </Scroll>
            <div slot="footer">
                
            </div>
        </Modal>  
    </div>
</template>
<script>
import productTitle from '../../components/productTitle'
import city2 from '../../asset/js/city2'
import { getProvinces , getCity , vehicleInfoByLicenseNo , modelExactness , modelMistiness , saveInsurance} from '../../api/api'
export default {
    data () {
        return {
            spinShow: false,
            carnmuber : {
                carid:'',
            },            
            refarry:city2,
            select1:'27',
            areas:[],
            ref:'京',
            provinceModal:false,
            modal_loading:false,
            carInfo:{

            },
            insured:{
                insuredName:'',
                insuredMobile:'',
                insuredID:''
            },
            applicant:{
                applicantName:'',
                applicantMobile:'',
                applicantID:''
            },
            getData:{

            },
            carType:[],
            brandModal:false,
            brandHead:[
                    {
                        title: '车型',
                        key: 'brandName',
                        render:(h,params)=>{
                            return h('div',{
                            },params.row.standardName+params.row.engineDesc+params.row.parentVehName+params.row.familyName+params.row.seat+'座')
                        }
                    },
                    {
                        title: '新车购置价',
                        key: 'newCarPrice',
                        width:'200',
                        render:(h,params)=>{
                            return h('div',{
                            },'新车购置价：'+params.row.newCarPrice)
                        }
                    },
            ],
            brandList:[],
            brandInput:'',
            page:1,
            ruleValidate:{
                frameNo: [
                    { required: true, message: '请正确填写车架号',pattern: /^[A-Z0-9*]{17}$/, trigger: 'blur' }  //   
                ],
                engineNo: [
                    { required: true, pattern: /^[A-Za-z0-9*]*$/, message: '请正确填写发动机号', trigger: 'blur' }
                ],
                brandCode: [
                    { required: true, message: '请选择品牌型号', trigger: 'change' }
                ],
                firstRegister: [
                    { required: true, type: 'date', message: '请选择登记日期', trigger: 'change' }
                ],
                isTrans: [
                    { required: true, message: '请选择是否一年内过户', trigger: 'change' }
                ],
                trans: [
                    { required: true, type: 'date', message: '请选择过户日期', trigger: 'change' }
                ],
                ownerName:[
                    { required: true, message: '请正确填写车主姓名', trigger: 'blur' }
                ],
                ownerID:[
                    { required: true,pattern:  /(^\d{15}$)|(^\d{17}(\d|X)$)/ , message: '请正确填写车主身份证号', trigger: 'blur' }
                ],
                ownerMobile:[
                    { required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请正确填写车主手机号', trigger: 'blur' }   // 
                ],
                applicantName:[
                    { required: true, message: '请正确填写投保人姓名', trigger: 'blur,change' }
                ],
                applicantID:[
                    { required: true,pattern:  /(^\d{15}$)|(^\d{17}(\d|X)$)/ , message: '请正确填写投保人身份证号', trigger: 'blur,change' }
                ],
                applicantMobile:[
                    { required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请正确填写投保人手机号', trigger: 'blur,change' }
                ],
                insuredName:[
                    { required: true, message: '请正确填写被保人姓名', trigger: 'blur,change' }
                ],
                insuredID:[
                    { required: true,pattern:  /(^\d{15}$)|(^\d{17}(\d|X)$)/ ,  message: '请正确填写被保人身份证号', trigger: 'blur,change' }
                ],
                insuredMobile:[
                    { required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请正确填写被保人手机号', trigger: 'blur,change' }
                ],
            }
        }
    },
    components: {
        productTitle
    },
    computed: {
        fullcarid: function(){
            return this.ref + this.carnmuber.licenseNo
        },
        stateCarinfo(){
             return this.$store.state.carinfo
        },
        isTrans(){
            return this.carInfo.isTrans == 1 ? true : false
        }
    },
    mounted () {
        let _info =  this.stateCarinfo
        if(_info.frameNo){  
            this.carInfo.engineNo = _info.engineNo
            this.carInfo.firstRegisterDate = _info.firstRegisterDate
            this.carInfo.firstRegister = _info.firstRegisterDate
            this.carInfo.frameNo = _info.frameNo
            this.carInfo.licenseNo = _info.licenseNo
            this.carInfo.responseNo = _info.responseNo
            this.getData = _info       
            let _params = {
                frameNo:_info.frameNo,
                licenseNo:_info.licenseNo,
                responseNo:_info.responseNo
            }
            this.getCarType(_params)
        }
    },
    methods: {
        chooseBrand(index){
            console.log(this.brandList[index])
            this.carType = []
            this.carType.push(this.brandList[index])
            this.carInfo.brandCode = this.brandList[index].brandCode
            this.carInfo.brandName = this.brandList[index].standardName+this.brandList[index].engineDesc+this.brandList[index].parentVehName
            this.brandModal = !this.brandModal
        },
        handleReachBottom(){
            this.page++ 
            let _params = {
                brandName:this.brandInput,
                page:this.page,
            }
            return new Promise(resolve => {
                new Promise((resolve, reject) => {
                    modelMistiness(_params).then(response => {
                        console.log(response.data)
                        if(response.data.state == 1){
                            setTimeout(() => {
                                this.brandList =  this.brandList.concat(response.data.data)
                            }, 5000);
                        }else{

                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            })
        },
        brandSearch(){
            this.page = 1
            let _params = {
                brandName:this.brandInput,
                page:this.page,
            }
            new Promise((resolve, reject) => {
                modelMistiness(_params).then(response => {
                    console.log(response.data)
                    if(response.data.state == 1){
                        this.brandList = response.data.data
                    }else{

                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        openBrandModal(){
            this.brandModal = !this.brandModal
        },
        brandCodeChange(item){
            console.log(item)
            if(item.label){
                this.carInfo.brandName = item.label
            }
            
        },
        dateChange(val,obj,attr){
                obj[attr] = val;
                console.log(obj[attr]);
        },
        applicantChange(e){
            if(e){
                this.applicant.applicantName = this.carInfo.ownerName
                this.applicant.applicantMobile = this.carInfo.ownerMobile
                this.applicant.applicantID = this.carInfo.ownerID               
            }else{
                 this.applicant.applicantName = ''
                 this.applicant.applicantMobile = ''
                 this.applicant.applicantID = ''
            }
        },
        insuredChange(e){
            if(e){
                this.insured.insuredName = this.carInfo.ownerName
                this.insured.insuredMobile = this.carInfo.ownerMobile
                this.insured.insuredID = this.carInfo.ownerID
            }else{
                this.insured.insuredName = ''
                this.insured.insuredMobile = ''
                this.insured.insuredID = ''
            }
        },
        frameNoChange(){
            if(this.carInfo.frameNo != this.stateCarinfo.frameNo){
                this.carInfo.responseNo = ''
            }else{
                this.carInfo.responseNo = this.stateCarinfo.responseNo
            }  
        },
        engineNoChange(){
            if(this.carInfo.engineNo != this.stateCarinfo.engineNo){
                this.carInfo.responseNo = ''
            }else{
                this.carInfo.responseNo = this.stateCarinfo.responseNo
            }   
        },
        getCarType(params){
            new Promise((resolve, reject) => {
                modelExactness(params).then(response => {
                    console.log(response.data)
                    if(response.data.state == 1){
                        this.carType = response.data.data
                        if(response.data.data.length > 0){
                            this.carInfo.brandCode = response.data.data[0].brandCode
                            this.carInfo.brandName =response.data.data[0].standardName+response.data.data[0].engineDesc+response.data.data[0].parentVehName
                        }
                    }else{

                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        goBack(){
            window.history.go(-1);
        },
        next(){
            let successtag = 0
            let formarry = ['carInfo','owner','applicant','insured']
            for(var i=0;i<formarry.length;i++){
                this.$refs[formarry[i]].validate((valid) => {
                if (valid) {                       
                    } else {
                        successtag++
                    }
                })
            }
            if(successtag == 0){
                this.carInfo.engineNo = this.carInfo.engineNo.toUpperCase()
                //console.log(this.carInfo.licenseNo)
                if(this.carInfo.licenseNo ==''){
                    this.carInfo.licenseNo = '新车'
                }
                //let _carinfo = Object.assign({},this.carInfo)
                let _allInfo = Object.assign(this.carInfo,this.insured,this.applicant)
                this.$store.dispatch('changeCarInfo',_allInfo)
                this.$store.dispatch('changeCarType',this.carType)
                this.$router.push({name:'offer_detail'})
                  
                
                
            } 
        }    
    }
}
</script>
